// 时间分片-->对大量的数据分多次进行渲染，避免卡顿、卡死的情况
import React from "react";
class TimeLow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }
  componentDidMount() {
    // 模拟数据
    this.preList = new Array(40000).fill(0)
    this.sliceTimeList(0);
  }
  // 时间分片，每次渲染100条数据
  sliceTimeList = (time) => {
    // 打印次数
    console.log(time);
    if (time === 400) {
      return;
    }
    setTimeout(() => {
      // 每次执行截取数据
      const sliceList = this.preList.slice(time * 100, (time + 1) * 100);
      this.setState({
        list: this.state.list.concat(sliceList)
      })
      // 递归调用
      this.sliceTimeList(time + 1)
    }, 10)
  }
  render() {
    return (
      <>
        <h1>时间分片</h1>
        {
          this.state.list.map((item, index) => {
            return <div key={index}>这是第{index + 1}条数据</div>
          })
        }
      </>
    )
  }
}
export default TimeLow;